1
00:00:00,630 --> 00:00:04,050
Hello and welcome to this feat you in this video.

2
00:00:04,050 --> 00:00:13,350
We aren't going to create the canvas object in our previous video in our haste TMF file.

3
00:00:13,590 --> 00:00:21,540
We added the hastier mail Campbell's element to the page using this tag here.

4
00:00:21,540 --> 00:00:26,020
So now going to create a new file which is going to be a javascript far.

5
00:00:26,370 --> 00:00:37,550
So going to click on the file option and click new and I'm going to save that file as a clock.

6
00:00:38,060 --> 00:00:39,880
I'm going to call it a clock.

7
00:00:39,950 --> 00:00:41,980
Dot g s.

8
00:00:42,350 --> 00:00:47,120
And inside this drop down here are just sell it.

9
00:00:47,190 --> 00:00:50,350
This javascript option and click save.

10
00:00:50,610 --> 00:00:55,440
So we now have a javascript file system of Far.

11
00:00:55,860 --> 00:00:59,070
So let's create a canvas update.

12
00:00:59,140 --> 00:01:03,230
We're going to use a variable to do that.

13
00:01:03,240 --> 00:01:12,610
So here we created a canvas object from the hastier mail canvas element so you can see we use in the

14
00:01:12,630 --> 00:01:14,950
documented case element.

15
00:01:15,240 --> 00:01:21,060
And the ideas come about which is this here from the hit here mail element.

16
00:01:21,060 --> 00:01:26,490
All right so here we have now created his canvas object.

17
00:01:26,490 --> 00:01:34,130
The next thing we're going to do we have one to create a two deep drawn object.

18
00:01:34,260 --> 00:01:38,320
Again we're going to use a very sound line to hear.

19
00:01:38,350 --> 00:01:41,710
Got a variable called city X city Expo.

20
00:01:41,800 --> 00:01:43,880
Stands for context.

21
00:01:43,890 --> 00:01:46,770
So we set in that to you Kwas to canvas.

22
00:01:46,860 --> 00:01:49,090
Don't quite get context.

23
00:01:49,350 --> 00:01:51,640
An inside were Pass in it too.

24
00:01:51,690 --> 00:02:03,090
So this will create a two to draw an object for the canvas object.

25
00:02:03,090 --> 00:02:14,400
Next in I want to do is calculate the clock radius using the height of the canvas so to calculate the

26
00:02:14,400 --> 00:02:17,130
clock radius is in the height of the compass.

27
00:02:17,460 --> 00:02:22,250
We add a variable quote radius and said that two equals two did come back.

28
00:02:22,350 --> 00:02:25,490
Height divided by two.

29
00:02:25,950 --> 00:02:36,570
By using the canvas height to calculate the clock radius it makes like clock work for all canvas sizes

30
00:02:36,610 --> 00:02:41,500
so regardless of the size of your canvas the clock should work.

31
00:02:41,610 --> 00:02:50,370
The next line of course I want to add business we is going to remap the position which is the X and

32
00:02:50,370 --> 00:02:58,120
Y axis is going to remove them which is going to be the actual position of the drawing objects.

33
00:02:58,140 --> 00:03:07,580
It's going to remap it to the centre of the canvas so we use in the sticks which is this variable here.

34
00:03:07,650 --> 00:03:09,140
There's variable here.

35
00:03:09,270 --> 00:03:15,060
Translate I will pass in the radios and the rate is basically what this will do.

36
00:03:15,240 --> 00:03:20,260
It will remap the position zero and zero.

37
00:03:20,310 --> 00:03:31,890
So the zero would be on the x axis and C row on the y axis or here in maps it to position the drawing

38
00:03:31,890 --> 00:03:41,580
an object at the centre of the canvas blakeson I want to do is I want to reduce the clock radius to

39
00:03:41,640 --> 00:03:44,250
about 90 percent saw.

40
00:03:44,380 --> 00:03:53,560
To draw the clock so that the clock when the clock is drawn it is drawn inside the compass.

41
00:03:53,830 --> 00:04:05,070
Next And I want to do is create a function that will be used to draw the clock to save time.

42
00:04:05,130 --> 00:04:13,230
I have added the function that would be used to draw the face of the clock so this is a function here

43
00:04:13,850 --> 00:04:20,820
to to create a function you type in the keyword function followed by the name you want to call the functions

44
00:04:20,820 --> 00:04:23,240
of call the function drop clock.

45
00:04:23,550 --> 00:04:25,830
When creating functions.

46
00:04:26,260 --> 00:04:35,290
Good idea to name the function to reflect the work or what the function will do.

47
00:04:36,090 --> 00:04:46,620
And inside the curly braces is the outroar code that will be responsible for drawing in the face of

48
00:04:46,620 --> 00:04:47,340
the clock.

49
00:04:47,550 --> 00:04:50,780
So here we've quote the context.

50
00:04:50,910 --> 00:04:53,930
Ask the dot ark method.

51
00:04:54,000 --> 00:04:59,800
Physically is used to create an arc or a curve which is.

52
00:05:00,050 --> 00:05:05,900
To Croods schools or parts of the circle and inside.

53
00:05:05,930 --> 00:05:12,170
Parentheses for this ark method we've got different arguments or parameters.

54
00:05:12,410 --> 00:05:21,890
So this bizarre akeley is used to draw the actual arc of the circle position it and that is here we've

55
00:05:22,070 --> 00:05:32,600
the Rangers and also we've got the maths that PI mythically the master PI property represents the reissue

56
00:05:32,840 --> 00:05:44,390
of the conference of the circle to the diameter of the circle of mass of Pi property represents the

57
00:05:44,390 --> 00:05:54,890
ratio of the second conference of is so cool to its diameter which is approximately three point 1 4

58
00:05:55,160 --> 00:05:59,710
1 5 9 on line 10.

59
00:05:59,700 --> 00:06:01,550
Here will quote a context.

60
00:06:01,640 --> 00:06:06,500
We'll start with giving it a collar or white.

61
00:06:06,500 --> 00:06:15,910
Basically this is a column that used to feel the face off the circle that has been drawn by this clock

62
00:06:15,920 --> 00:06:19,900
so the actual face of the clock is going to be white.

63
00:06:19,930 --> 00:06:24,000
We're achieving that using this method called context.

64
00:06:24,110 --> 00:06:31,790
Don't feel so tyred this Phil style method is what gives the clock a white face background you can specify

65
00:06:31,790 --> 00:06:35,020
any but in this case I've just used white.

66
00:06:35,030 --> 00:06:47,190
You can also use the context of Phil's property to return the carlaw the gradient or a pattern you use

67
00:06:47,560 --> 00:06:54,940
feeling the drawing on line 11 and we've got the field method.

68
00:06:54,980 --> 00:07:05,680
Basically this is used to feel the current path of the drawing so it fills the current prime path and

69
00:07:05,930 --> 00:07:09,950
the default colour is black.

70
00:07:10,040 --> 00:07:19,460
When you create a function for the function to do its job you have to call it or reference it so you

71
00:07:19,460 --> 00:07:21,500
can see here on line 6.

72
00:07:21,510 --> 00:07:27,570
I have added a reference to this clock so it's going to draw that calling the function.

73
00:07:27,570 --> 00:07:31,700
Here's going to draw this clock you draw the face of the clock here.

74
00:07:31,700 --> 00:07:36,030
Inside this place this you can call it function from anywhere.

75
00:07:36,250 --> 00:07:38,180
I'm calling it from here.

76
00:07:38,450 --> 00:07:43,800
So when this chord when this lines of call read any comms hear it.

77
00:07:43,850 --> 00:07:45,450
Then draw the clock.

78
00:07:45,450 --> 00:07:48,790
Use in or is in this code.

79
00:07:48,800 --> 00:07:50,670
In between the curly braces.

80
00:07:50,790 --> 00:07:58,640
Okay so next time I want to have actually done it but I'm just going to tell why I created a CSA file

81
00:07:58,640 --> 00:07:59,330
here.

82
00:07:59,630 --> 00:08:07,520
So basically the file you create the file the same way you go to file a new new file and then save it

83
00:08:07,890 --> 00:08:11,650
in to your relevant directory.

84
00:08:11,690 --> 00:08:18,550
So basically it is a biz in style in the body giving the actual body type background.

85
00:08:18,750 --> 00:08:19,880
A lot of black.

86
00:08:19,880 --> 00:08:23,000
This is black in hex value.

87
00:08:23,360 --> 00:08:29,200
The compass position and that someone to come has to be position in a certain way.

88
00:08:29,210 --> 00:08:35,510
So I want there to be some margin from the left and I am giving the value of 300 pixels and I want there

89
00:08:35,510 --> 00:08:37,480
to be a mile from the top.

90
00:08:37,550 --> 00:08:40,850
Give in if the pics are basically saying from the left.

91
00:08:40,880 --> 00:08:44,590
Move it to 300 pixels out from the top.

92
00:08:44,600 --> 00:08:48,860
Move it down 50 pixels so I'm going to save that.

93
00:08:49,340 --> 00:08:51,720
And now we can test the clock.

94
00:08:52,050 --> 00:08:55,640
So this is a clock so you should get something like this.

95
00:08:55,640 --> 00:08:57,630
This is the actual face of the clock.

96
00:08:57,770 --> 00:09:00,970
So if he can see something like me then congratulations.

97
00:09:01,220 --> 00:09:03,710
We are on the same page.

98
00:09:03,860 --> 00:09:06,060
So that's basically it for this lecture.

99
00:09:06,060 --> 00:09:14,030
We've got a few more functions to go to get the clock working properly so thanks for watching.

100
00:09:14,030 --> 00:09:14,890
Bye for now.